interface ImageSize {
  width: number
  height: number
}

/**
 * 获取图片的原始宽高
 * @param src 图片地址
 */
export const getImageSize = (src: string): Promise<ImageSize> => {
  return new Promise(resolve => {
    const img = document.createElement('img')
    img.src = src
    img.style.opacity = '0'
    document.body.appendChild(img)

    img.onload = () => {
      // img.clientWidth 返回img元素的内部宽度
      const imgWidth = img.clientWidth
      const imgHeight = img.clientHeight

      img.onload = null
      img.onerror = null

      document.body.removeChild(img)
      resolve({ width: imgWidth, height: imgHeight })
    }

    img.onerror = () => {
      img.onload = null
      img.onerror = null
    }
  })
}

/**
 * 读取图片文件的dataURL
 * @param file 图片文件
 */
export const getImageDataURL = (file: File): Promise<string> => {
  return new Promise(resolve => {
    // FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。
    const reader = new FileReader()
    // 一旦完成读取，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
    reader.readAsDataURL(file)
    // load事件在整个页面及所有依赖资源如样式表和图片都已完成加载时触发
    reader.addEventListener('load', () => {
      // reader.result：文件的内容，该属性仅在读取操作完成后才有效。
      resolve(reader.result as string)
    })
  })
}